import React from 'react';
import { Form, Input, Button, message, Modal, Space, Tabs, DatePicker, Checkbox } from 'antd';
import {
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { connect } from 'umi';
import UploadUtil from '@/components/UploadUtil';
import moment from 'moment';

const currControl = "Tenant";
const { confirm } = Modal;
const { TabPane } = Tabs;

class VaccinesEdit extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            datas: {},
            imageUrl: '',
            imgList: [],
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        const { ParentData } = this.props;
        if (ParentData && ParentData.id) {
            this.getData(ParentData.id);
        }
    }
    getData = (id: number) => {
        const { dispatch } = this.props;
        if (id) {
            dispatch({
                type: 'Abp/get',
                payload: { id },
                control: currControl,
            }).then(() => {
                var result = this.props.response.result;
                this.setState({ datas: result })
                if (result.endDate)
                    result.endDate = moment(result.endDate);
                if (result.effectDate)
                    result.effectDate = moment(result.effectDate);
                this.formRef.current.setFieldsValue({ model: result });

            });
        }
    }
    onFinish = async (values: any) => {
        var act = "Abp/create";
        if (values.model.id) {
            act = "Abp/update";
        }
        this.props.dispatch({
            type: act,
            payload: values.model,
            control: currControl,
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('保存成功！');
                this.props.fetchDatas();
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    };
    ResetForm = () => {
        var data = {
            id: 0,
        }
        this.setState({ datas: data });
        this.formRef.current.resetFields();
    }
    handleDel = () => {
        this.props.dispatch({
            type: "Abp/delete",
            payload: { Id: this.state.datas.id },
            control: currControl,
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('删除成功！');
                this.props.fetchDatas();
                this.formRef.current.resetFields();
            }
            else {
                message.error('删除错误，请联系管理员！');
            }
        })
    }
    showConfirm = () => {
        var _this = this;
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.handleDel();
            },
            onCancel() { },
        });
    }
    handleChange = (editorState: any) => {
        this.setState({
            contentEditor: editorState.toHTML(),
        });
    }
    onChange = (value: number[]) => {
        this.setState({
            inputValue: value,
        });
    };
    handleUpload = (info: any) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            UploadUtil.getBase64(info.file.originFileObj, (imageUrl: any) =>
                this.setState({
                    imageUrl,
                    imgList: info.fileList,
                    loading: false,
                }),
            );
        }
    };
    render() {
        const { datas, loading } = this.state;
        return (
            <div>
                <Form ref={this.formRef} layout="vertical" onFinish={this.onFinish} >
                    <Tabs defaultActiveKey="1" >
                        <TabPane tab="基本" key="1">
                            <div style={{ display: 'none' }}>
                                <Form.Item
                                    label="id"
                                    name={['model', 'id']}>
                                    <Input />
                                </Form.Item>
                            </div>
                            <Form.Item
                                name={['model', 'name']}
                                label="租户名"
                                rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name={['model', 'tenancyName']}
                                label="租户别名"
                                rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name={['model', 'adminEmailAddress']}
                                label="电子邮箱"
                                hidden={datas.id != null}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name={['model', 'effectDate']}
                                label="生效日期">
                                <DatePicker />
                            </Form.Item>
                            <Form.Item
                                name={['model', 'endDate']}
                                label="截止日期">
                                <DatePicker />
                            </Form.Item>
                            <Form.Item
                                name={['model', 'connectionString']}
                                label="数据库连接字符串"
                                hidden={datas.id != null}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name={['model', 'isActive']} valuePropName="checked">
                                <Checkbox>激活</Checkbox>
                            </Form.Item>
                        </TabPane>
                    </Tabs>
                    <Form.Item>
                        <Space>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={loading}
                            >确定</Button>
                            <Button onClick={this.ResetForm}>重设</Button>
                            <Button danger
                                onClick={this.showConfirm}
                                disabled={!datas.id}>删除</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default connect(({ Abp, Category }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
    Category
}))(VaccinesEdit);